<template>
  <div>
    <div class="elements">
      <div v-for="element in elements" :key="element" @click="selectElement(element)" class="element">
        {{ element }}
      </div>
    </div>
    <div class="selected-elements">
      <div v-for="(selected, index) in selectedElements" :key="index" class="selected-element">
        {{ selected }}
        <button @click="removeElement(index)">×</button>
      </div>
    </div>
    <button @click="synthesize">合成</button>
    <div v-if="result" class="result">
      合成结果: {{ result }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      elements: ['金', '木', '水', '火', '土'],
      selectedElements: [],
      result: null
    };
  },
  methods: {
    selectElement(element) {
      if (this.selectedElements.length < 5) {
        this.selectedElements.push(element);
      }
    },
    removeElement(index) {
      this.selectedElements.splice(index, 1);
    },
    async synthesize() {
      if (this.selectedElements.length < 2) {
        alert('请至少选择两个元素');
        return;
      }
      try {
        const response = await axios.post(`/generate_caption`, {
          input_text: this.selectedElements.join(',')
        });
        this.result = response.data.caption;
      } catch (error) {
        console.error('合成失败:', error);
        alert('合成失败，请稍后重试');
      }
    }
  }
};
</script>

<style scoped>
.elements {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}
.element {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}
.selected-elements {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.selected-element {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.result {
  margin-top: 20px;
  font-weight: bold;
}
</style>